<template>
  <div class="total-table-container">
    <div class="bottom-chart-header">
      <!--<div class="header-column">
        <a-input-search v-model="searchInput" style="margin-top: 20px; padding: 5px"
                        placeholder="请输入搜索关键词" enter-button="搜 索"
                        @search="searchParam" />
      </div>-->
      <!-- <div class="header-column">
        <span class="header-column-title">订单类型:</span>
        <a-select
          show-search :value="billTypeValue"
          placeholder="请选择"
          option-filter-prop="children"
          style="width: 67%; margin-top: 30px"
          @change="handleBillChange"
        >
          <a-select-option value="all">
            全部
          </a-select-option>
          <a-select-option value="我的">
            我的
          </a-select-option>
        </a-select>
      </div> -->
      
      <!-- <div class="header-column">
        <a-input placeholder="请输入" v-model="searchInput" class="mend-search-input" />
        <div class="mend-search-button" @click="searchParam">
          <a-icon type="search" class="icon" />
        </div>
      </div> -->
      
      <!-- <div class="header-column">
        <div class="mend-advanced-search" @click="handleAdvancedSearch">高级搜索</div>
      </div> -->

    </div>

    <a-table :columns="columns" :data-source="tableData" :loading="isLoading"
             :pagination="pagination" bordered class="single-table"
             :scroll="{ x: 1200}" @change="tableChange"
             :customRow="clickSingleRow"
             id="mendListTable">

      <template slot="state" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.state===1">已报单</span>
          <span v-if="record.state===2">已指派</span>
          <span v-if="record.state===8">进行中</span>
          <span v-if="record.state===9">工单暂停</span>
          <span v-if="record.state===5">待评价/待回访</span>
          <span v-if="record.state===6">已评价/已关闭</span>
          <span v-if="record.state===10">内部已关闭</span>
        </div>
      </template>

      <template slot="afterSaleNumber" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.afterSaleNumber === ''" class='update-button'>
            <img src='@/images/agent_service.png' />
          </span>
          <span v-if="record.afterSaleNumber !== ''" class='update-button'>
            <img src='@/images/hzncc_service.png' />&nbsp;&nbsp;<img src='@/images/agent_service.png' />
          </span>
        </div>
      </template>

    </a-table>

    

  </div>
</template>

<script>
  import api from '@/server/userConfig';
  import GLOBAL from "@/api/global_variable"
  import axios from 'axios';
  let time = (new Date).getTime() + 24 * 60 * 60 * 1000;
  let tmoday = new Date(time);
  tmoday = tmoday.getFullYear() + "-" + (tmoday.getMonth() > 9 ? (tmoday.getMonth() + 1) : "0" +
    (tmoday.getMonth() + 1)) + "-" + (tmoday.getDate() > 9 ? (tmoday.getDate()) : "0" + (tmoday.getDate()));
  let endTime = tmoday;

  const columns = [
    {
      title: '订单类型',
      dataIndex: 'afterSaleNumber',
      width: '180px',
      key: 'afterSaleNumber',
      scopedSlots: { customRender: 'afterSaleNumber' },
    },{
      title: '订单编号',
      dataIndex: 'repairOrderNumber',
      key: 'repairOrderNumber',
      width: '180px',
    },{
      title: '客户单位',
      dataIndex: 'companyName',
      key: 'companyName',
      width: '180px',
    },{
      title: '故障描述',
      dataIndex: 'description',
      key: 'description',
      width: '300px',
      ellipsis: true,
      class: 'fault-description'
    },{
      title: '报修时间',
      dataIndex: 'uploadTime',
      key: 'uploadTime',
      width: '180px',
    },{
      title: '订单状态',
      dataIndex: 'state',
      key: 'state',
      width: '180px',
      class: 'bill-state',
      scopedSlots: { customRender: 'state' },
    }, {
      title: '机床编号',
      dataIndex: 'macNumb',
      key: 'macNumb',
      width: '180px',
    }, {
      title: '机床型号',
      dataIndex: 'macType',
      key: 'macType',
      width: '240px',
    }, {
      title: '报修人姓名',
      dataIndex: 'repairman',
      key: 'repairman',
      width: '150px',
    }, {
      title: '报修人电话',
      dataIndex: 'phoneNumber',
      key: 'phoneNumber',
      width: '180px',
    },{
      title: '当前处理人',
      dataIndex: 'appointor',
      key: 'appointor',
      width: '150px',
    }, {
      title: '机床厂家',
      dataIndex: 'macFactory',
      key: 'macFactory',
      width: '180px',
    }, {
      title: '设备购买时间',
      dataIndex: 'purchaseTime',
      key: 'purchaseTime',
      width: '180px',
    }, {
      title: '系统型号',
      dataIndex: 'ncSystemType',
      key: 'ncSystemType',
      width: '180px',
      class: 'hello',
    }, {
      title: '所属片区',
      dataIndex: 'ownDistrict',
      key: 'ownDistrict',
      width: '180px',
    }, {
      title: '任务类别',
      dataIndex: 'taskType',
      key: 'taskType',
      width: '180px',
    }, {
      title: '设备类型',
      dataIndex: 'equipmentType',
      key: 'equipmentType',
      width: '180px',
      ellipsis: true,
    }, {
      title: '保修状态',
      dataIndex: 'guaranteeState',
      key: 'guaranteeState',
      width: '180px',
    }, {
      title: '客户类型',
      dataIndex: 'customerType',
      key: 'customerType',
      width: '180px',
    }, {
      title: '信息来源',
      dataIndex: 'informationSource',
      key: 'informationSource',
      class: 'hello',
      width: '180px',
    }, {
      title: '数控系统编号',
      dataIndex: 'ncNumber',
      key: 'ncNumber',
      width: '180px',
    }, {
      title: '数控系统SN',
      dataIndex: 'macSn',
      key: 'macSn',
      width: '180px',
    }, {
      title: '类型',
      dataIndex: 'saleNumber',
      key: 'saleNumber',
      width: '180px',
    }, {
      title: '故障类型',
      dataIndex: 'impedimentType',
      key: 'impedimentType',
      width: '180px',
      ellipsis: true,
    }, {
      title: '故障发生时间',
      dataIndex: 'impedimentStartTime',
      key: 'impedimentStartTime',
      width: '180px',
    },{
      title: '现场服务工程师',
      dataIndex: 'fieldEngineer',
      key: 'fieldEngineer',
      width: '150px',
    },{
      title: '需求建议',
      dataIndex: 'demandSuggestion',
      key: 'demandSuggestion',
      width: '180px',
      ellipsis: true,
    }, {
      title: '其他描述',
      dataIndex: 'otherDescription',
      key: 'otherDescription',
      width: '180px',
      ellipsis: true,
    }, {
      title: '解决方案',
      dataIndex: 'solution',
      key: 'solution',
      width: '150px',
      ellipsis: true,
    }, {
      title: '重大专项课题名称',
      dataIndex: 'topicName',
      key: 'topicName',
      width: '150px',
      ellipsis: true,
    }, {
      title: '重大专项课题编号',
      dataIndex: 'topicNumber',
      key: 'topicNumber',
      width: '150px',
      ellipsis: true,
    }, {
      title: '重大专项应用领域',
      dataIndex: 'applicationRange',
      key: 'applicationRange',
      width: '180px',
      ellipsis: true,
    }, {
      title: '服务满意度',
      dataIndex: 'serviceScore',
      key: 'serviceScore',
      width: '150px',
    },{
      title: '服务回访备注',
      dataIndex: 'serviceEvaluate',
      key: 'serviceEvaluate',
      width: '150px',
    },{
      title: '产品满意度',
      dataIndex: 'produceScore',
      key: 'produceScore',
      width: '150px',
    },{
      title: '产品回访备注',
      dataIndex: 'produceEvaluate',
      key: 'produceEvaluate',
      width: '150px',
    },
  ];

  export default {
    name: "MendTableContainer",
    data () {
      //this.cacheData = data.map(item => ({ ...item }));
      return {
        role: 17,
        tableData: [],
        columns: columns,
        editingKey: '',
        visible: false,
        username: '',
        isLoading: false,
        repairOrderNumber: '',
        afterSaleNumber: '',
        dispatchName: '',
        dispatchPhone: '',
        transferPhone: '',
        formItemLayout: {
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        },
        dispatchList: [{name: '罗健', id: 23, phone: '18392152392'}],
        transferList: [{name: '罗健', id: 23, phone: '18392152392'}],
        pagination: {
          page: 1, pageSize: 8, // 默认每页显示数量
          total: 20,   // 总数量;
          current: 1,
          defaultCurrent: 1,
          pageSizeOptions: ['5', '10', '15', '20'],
          onShowSizeChange: (page, pageSize) => this.pageSize = pageSize,
        },
        billTypeValue: '全部',
        finishTypeValue: '',
        stateTypeValue: '-1',
        searchInput: '',
        advancedSearchValue: '',
        advancedModal: false,
        evaluateModel: false,
        innerModel: false,
        transferModel: false,
        finishModel: false,
        values: {},
        count: 4,
        serviceScore: 3,
        serviceDesc: ['不满意', '一般', '满意', '很满意'],
        produceScore: 3,
        produceDesc: ['不满意', '一般', '满意', '很满意'],
        currentPage: 1,
        form: this.$form.createForm(this, { name: 'dynamic_rule' }),
        evaluateForm: this.$form.createForm(this, { name: 'evaluate_form' }),
        transferForm: this.$form.createForm(this, { name: 'transfer_form' }),
        billTypeValue: '全部',
        advancedModal: false,
      }
    },
    computed: {
      firstDispatchData: function () {
        return this.dispatchList[0].name
      },
    },
    created () {
      // 获取链接参数username值，然后存进内存中
      this.username = localStorage.getItem('phone');
    },
    mounted () {
      this.getRoleId();
      let pageIndex = 1;
      this.getMendList(GLOBAL.localIp + "/getCompletedRepairOrderByPage.action?" +
        "username="+this.username+"&pageIndex="+pageIndex+"&pageSize=8");
    },
    methods: {
      // 点击搜索按钮;
      searchParam () {
        const param = this.searchInput;
        console.log(param);
        if (!param) {
          this.$message.info('请输入搜索关键词');
          return
        }
        let pageIndex = 1;
        const url = GLOBAL.localIp + "/getRepairOrderByDistrictAndPage.action?" +
          "username="+this.username+"&pageIndex="+pageIndex+"&pageSize=8";
        this.getMendList(url);
      },
      // 获取维修单列表;
      getMendList (url) {
        console.log(url);
        this.isLoading = true;
        axios.get(url).then((res) => {
          console.log(res.data);
          const init_data = res.data.Data.content;
          const total = res.data.Data.total;
          this.isLoading = false;
          this.initTriggerData(init_data, total);
        })
      },
      // 重组维修单数据;
      initTriggerData (init_data, total) {
        let newData = [];
        if(init_data){
          const initDataLength = init_data.length;
          for(let i = 0; i < initDataLength; i++){
            if (init_data[i].evaluation == null) {
              init_data[i].serviceScore = '';         // 新增服务满意度;
              init_data[i].serviceEvaluate = '';     // 新增服务回访备注;
              init_data[i].produceScore = '';        // 新增产品满意度;
              init_data[i].produceEvaluate = '';     // 新增产品回访备注;
            }else if (init_data[i].evaluation != null) {
              init_data[i].serviceScore = init_data[i].evaluation.serviceScore + '分';         // 新增服务满意度;
              init_data[i].serviceEvaluate = init_data[i].evaluation.serviceEvaluate;     // 新增服务回访备注;
              init_data[i].produceScore = init_data[i].evaluation.produceScore + '分';        // 新增产品满意度;
              init_data[i].produceEvaluate = init_data[i].evaluation.produceEvaluate;     // 新增产品回访备注;
            }
            if(init_data[i].afterSaleService){
              //代表是售后数据;
              newData.push({
                saleNumber: '华中售后单',
                appointor: init_data[i].appointor,
                serviceScore: init_data[i].serviceScore,
                serviceEvaluate: init_data[i].serviceEvaluate,
                produceScore: init_data[i].produceScore,
                produceEvaluate: init_data[i].produceEvaluate,
                address: init_data[i].repairList.address || '',
                companyName: init_data[i].repairList.companyName || '',//****
                description: init_data[i].repairList.description || '',// ****
                state: init_data[i].repairList.state || '',// ****
                repairman: init_data[i].repairList.repairman || '',     //报修人姓名
                phoneNumber: init_data[i].repairList.phoneNumber || '',     //报修人电话
                macFactory: init_data[i].repairList.macFactory || '',     //机床厂家
                macType: init_data[i].repairList.macType || '',     //机床型号
                macNumb: init_data[i].repairList.macNumb || '',     //机床编号
                purchaseTime: init_data[i].repairList.purchaseTime || '',
                ncSystemType: init_data[i].repairList.ncSystemType || '',     //系统型号，以上是客户单；
                uploadTime: init_data[i].repairList.uploadTime || '',   // 报修时间;
                repairOrderNumber: init_data[i].afterSaleService.repairOrderNumber,
                afterSaleNumber: init_data[i].afterSaleService.afterSaleNumber,
                ownDistrict: init_data[i].afterSaleService.ownDistrict,     //所属片区；
                taskType: init_data[i].afterSaleService.taskType,     //任务类别；
                equipmentType: init_data[i].afterSaleService.equipmentType,     //设备类型；
                guaranteeState: init_data[i].afterSaleService.guaranteeState,     //保修状态；
                customerType: init_data[i].afterSaleService.customerType,     //客户类型；
                informationSource: init_data[i].afterSaleService.informationSource,     //信息来源；
                ncNumber: init_data[i].afterSaleService.ncNumber,     //数控系统编号；
                macSn: init_data[i].afterSaleService.macSn,     //数控系统SN；
                impedimentType: init_data[i].afterSaleService.impedimentType,     //故障类型；
                impedimentStartTime: init_data[i].afterSaleService.impedimentStartTime,     //故障发生时间；
                impedimentDescri: init_data[i].afterSaleService.impedimentDescri,     //故障详细描述；
                faultyPartsType: init_data[i].afterSaleService.faultyPartsType,     //故障件型号；
                faultyPartsNumber: init_data[i].afterSaleService.faultyPartsNumber,     //故障件编号；
                faultyPartsTime: init_data[i].afterSaleService.faultyPartsTime,     //故障件使用时间；
                fieldEngineer: init_data[i].afterSaleService.fieldEngineer,     //现场服务工程师；
                resolveTime: init_data[i].afterSaleService.resolveTime,     //处理时间；
                extraTime: init_data[i].afterSaleService.extraTime,     //加班时间；
                resolveNcNumber: init_data[i].afterSaleService.resolveNcNumber,     //设备处理数量；
                isViIssue: init_data[i].afterSaleService.isViIssue,    //是否重大问题；
                suit: init_data[i].suit,   // 是否是本人关联的单子

                demandSuggestion: init_data[i].afterSaleService.demandSuggestion,  // 需求建议,
                otherDescription: init_data[i].afterSaleService.otherDescription,  // 其他描述,
                solution: init_data[i].afterSaleService.solution,  // 解决方案,
                topicName: init_data[i].afterSaleService.topicName,  // 重大专项课题名称,
                topicNumber: init_data[i].afterSaleService.topicNumber,  // 重大专项课题编号,
                applicationRange: init_data[i].afterSaleService.applicationRange,  // 重大专项应用领域,

              });
            }
            init_data[i].saleNumber = init_data[i].afterSaleNumber;
          }
        }
        else {
          newData = [];
        }
        this.tableData = newData;
        this.pagination.total = total;
        for (let j = 0; j < newData.length; j++) {
          newData[j].key = newData[j].repairOrderNumber;
        }
      },
      // 点击每一行的跳转;
      clickSingleRow (record, index) {
        return {
          on: {
            click: () => {
              // 实现跳转;
              //this.$router.push(`/index/detail/${record.repairOrderNumber}`)
              window.open(`/#/index/finish/sale/${record.repairOrderNumber}/${record.afterSaleNumber}/${record.suit}`)
            }
          }
        }
      },
      // 点击表格分页;
      tableChange (page) {
        this.currentPage = page.current;
        this.pagination.current = page.current;
        this.pagination.defaultCurrent = page.current;
        this.handleAllPageChange();
      },
      // 处理各种状态选中的表格分页情况;
      handleAllPageChange () {
        let url = '';
        if (this.billTypeValue === '我的') {
          url = GLOBAL.localIp + "/getRepairOrderByDistrictAndPage.action?" +
            "username="+this.username+"&pageIndex="+this.currentPage+"&pageSize=8";
        } else {
          url = GLOBAL.localIp + "/getCompletedRepairOrderByPage.action?" +
            "username="+this.username+"&pageIndex="+this.currentPage+"&pageSize=8";
        }
        this.getMendList(url);
      },
      handleBlur() {},
      handleFocus() {},
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      // 根据登陆的手机号获取角色id;
      async getRoleId () {
        if (this.username !== '') {
          const res = await api.getRoleId({phoneNumber: this.username});
          if (res.MsgCode !== 0) {
            return
          }
          const roleId = res.Data.ID;
          this.role = roleId
        }
      },

      // 切换订单类型;
      async handleBillChange (value) {
        console.log(`selected ${value}`);
        let pageIndex = 1;
        this.pagination.current = 1;
        this.billTypeValue = value;
        this.finishTypeValue = '';
        // 清空输入框, 同时把订单状态切换到全部, 同时把高级搜索的也去掉;
        this.searchInput = '';
        this.stateTypeValue = '-1';
        this.advancedSearchValue = '';
        let url = '';
        if (value === '我的') {
          url = GLOBAL.localIp + "/getCompletedRepairOrderByPage.action?" +
            "username="+this.username+"&pageIndex="+pageIndex+"&pageSize=8";
        } else if (value === 'all') {
          url = GLOBAL.localIp + "/getCompletedRepairOrderByPage.action?state=-1&startTime=2017-01-01" +
            "&endTime="+endTime+"&param=all&username="+this.username+"&pageIndex="+pageIndex+"&pageSize=8";
        }
        this.getMendList(url);
      },

      // 点击高级搜索;
      handleAdvancedSearch () {
        this.advancedModal = true;
      },
    }
  }
</script>

<style lang="css" scoped>
  @import './style.css';
</style>
